<template>
  <div class="AfterSaleIndent">
    <a-card>
      <a-form :form="form">
        <!-- 一行三列 -->
        <a-row :gutter="30">
          <a-col :span="8">
            <a-form-item label="订单编号" :label-col="{ span: 5}" :wrapper-col="{ span: 16, offset: 1}">
              <a-input
                placeholder="请输入"
                v-decorator="[
          'orderNumber',
          {rules: [{ required: true, message: '请输入订单编号!' }]}
        ]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="售后编号" :label-col="{ span: 5}" :wrapper-col="{ span: 16, offset: 1}">
              <a-input
                placeholder="请输入"
                v-decorator="[
          'afterSaleNumber',
          {rules: [{ required: true, message: '请输入售后编号!' }]}
        ]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="售后状态" :label-col="{ span: 5 }" :wrapper-col="{ span: 16,offset:1}">
              <a-select
                v-decorator="[
          'afterSaleStatus',
          {rules: [{ required: true, message: '请选择售后状态!' }]}
        ]"
                placeholder="全部"
              >
                <a-select-option value="1">全部</a-select-option>
                <a-select-option value="2">待审核</a-select-option>
                <a-select-option value="3">退款中</a-select-option>
                <a-select-option value="4">已退款</a-select-option>
                <a-select-option value="5">已拒绝</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="30">
          <a-col :span="8">
            <a-form-item label="支付方式" :label-col="{ span: 5 }" :wrapper-col="{ span: 16,offset:1 }">
              <a-select
                v-decorator="[
          'payWay',
          {rules: [{ required: true, message: '请选择支付方式!' }]}
        ]"
                placeholder="全部"
              >
                <a-select-option value="1">全部</a-select-option>
                <a-select-option value="2">微信支付</a-select-option>
                <a-select-option value="3">支付宝支付</a-select-option>
                <a-select-option value="4">API</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="代理商" :label-col="{ span: 5}" :wrapper-col="{ span: 16, offset: 1}">
              <a-input
                placeholder="请输入"
                v-decorator="[
          'agent',
          {rules: [{ required: true, message: '请输入代理商!' }]}
        ]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="申请时间" :label-col="{ span: 5 }" :wrapper-col="{ span: 16,offset:1 }">
              <a-range-picker
                style="width: 100%"
                v-decorator="['range-time-picker', rangeConfig]"
                show-time
                format="YYYY-MM-DD HH:mm:ss"
              />
            </a-form-item>
          </a-col>
          <a-row>
            <a-col :span="23" :style="{ textAlign: 'right' }">
              <a-button type="primary" @click="findBackendGoodsReturnList()">查询</a-button>
              <a-button type="dashed" style="margin:0 2%" @click="listExport()">导出</a-button>
              <a-button htmlType="reset">重置</a-button>
            </a-col>
          </a-row>
        </a-row>
      </a-form>
    </a-card>
    <a-card style="margin-top:2%">
      <a-table
        :columns="columns"
        :dataSource="data"
        :pagination="pagination"
        @change="handleTableChange"
        :rowKey="record => record.id"
      >
        <template slot="operation" slot-scope="text,record">
          <div class="blue" @click="detailInfo(text,record)">详情</div>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script>
const columns = [
  {
    title: "售后编号",
    dataIndex: "returnCode",
    scopedSlots: { customRender: "afterSaleNumber" },
    align: "center"
  },
  {
    title: "订单编号",
    dataIndex: "orderCode",
    scopedSlots: { customRender: "orderNumber" },
    align: "center"
  },
  {
    title: "代理商",
    dataIndex: "agentId",
    scopedSlots: { customRender: "agent" },
    align: "center"
  },
  {
    title: "订单金额",
    dataIndex: "orderAmount",
    scopedSlots: { customRender: "orderSum" },
    align: "center"
  },
  {
    title: "退款金额",
    dataIndex: "requiredReturnMoney",
    scopedSlots: { customRender: "refundAmount" },
    align: "center"
  },
  {
    title: "实际退款金额",
    dataIndex: "actualReturnMoney",
    scopedSlots: { customRender: "actualRefundAmount" },
    align: "center"
  },
  {
    title: "退款原因",
    dataIndex: "questionDesc",
    scopedSlots: { customRender: "refundReason" },
    align: "center"
  },
  {
    title: "退款状态",
    dataIndex: "statusName",
    scopedSlots: { customRender: "refundStatus" },
    align: "center"
  },
  {
    title: "支付方式",
    dataIndex: "paymentMethodName",
    scopedSlots: { customRender: "payWay" },
    align: "center"
  },
  {
    title: "申请时间",
    dataIndex: "createDate",
    scopedSlots: { customRender: "applyTime" },
    align: "center"
  },
  {
    title: "退款时间",
    dataIndex: "returnTime",
    scopedSlots: { customRender: "refundTime" },
    align: "center"
  },
  {
    title: "操作",
    dataIndex: "",
    scopedSlots: { customRender: "operation" },
    align: "center"
  }
];
const data = [
  {
    key: "1"
  }
];
export default {
  name: "AllGoods",
  data() {
    return {
      form: this.$form.createForm(this),
      rangeConfig: {
        rules: [
          { type: "array", required: true, message: "Please select time!" }
        ]
      },
      data: [],
      columns,
      pagination: {
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ["2", "4", "8", "10", "12"],
        showTotal: (total, range) => {
          return `${range[0]}-${range[1]} 共${total}条`;
        },
        pageSize: 2,
        defaultCurrent: 1,
        current: 1,
        total: 5
      },
      passVisible: false,
      rejectVisible: false,
      orderAmount: ""
    };
  },
  watch: {},
  computed: {},
  methods: {
    handleSearch(e) {
      e.preventDefault();
      this.form.validateFields((error, values) => {
        console.log("error", error);
        console.log("Received values of form: ", values);
      });
    },
    callback(key) {
      console.log(key);
    },
    handleTableChange(pagination, filters, sorter) {
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      pager.pageSize = pagination.pageSize;
      pager.total = pagination.total;
      this.pagination = pager;
      this.findBackendGoodsReturnList();
    },

    // 查询售后订单列表
    findBackendGoodsReturnList() {
      var values = this.form.getFieldsValue();
      this.axios
        .post(this.baseUrl + "/order/findBackendGoodsReturnList", {
          loginToken: this.$store.state.loginToken,
          pageNum: this.pagination.current,
          pageSize: this.pagination.pageSize,
          orderCode: values.orderNumber
        })
        .then(response => {
          // console.log(response);
          this.data = response.data.data.list;
          this.pagination.total = response.data.data.total;
          this.pagination.pageSize = response.data.data.pageSize;
          this.pagination.current = response.data.data.pageNum;
        })
        .catch(error => {
          console.log(error);
        });
    },

    // 订单详情跳页传ID
    detailInfo(text, record) {
      var goodsReturnId = record.id;
      var returnCode = record.returnCode;
      console.log(returnCode);
      this.$store.commit("goodsReturnId", goodsReturnId);
      this.$store.commit("returnCode", returnCode);
      this.$router.push({
        path: "/home/orderadmin/aftersaleindent/aftersaledetails"
      });
    },

    // 售后订单导出
    listExport() {
      var values = this.form.getFieldsValue();
      this.axios({
        method: "post",
        url: this.baseUrl + "/order/exportGoodsReturn",
        data: {
          loginToken: this.$store.state.loginToken,
          pageNum: this.pagination.current,
          pageSize: this.pagination.pageSize,
          orderCode: values.orderNumber
        },
        responseType: "arraybuffer"
      }).then(res => {
        // console.log(res);
        if (res.status == "200") {
          const aLink = document.createElement("a");
          let blob = new Blob([res.data], {
            type: "application/vnd.ms-excel"
          });
          aLink.href = URL.createObjectURL(blob);
          aLink.download = "售后订单表";
          aLink.click();
          document.body.appendChild(aLink);
        }
      });
    }
  },
  created() {
    this.findBackendGoodsReturnList();
  },
  mounted() {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.AfterSaleIndent {
  width: 100%;
}
.green {
  color: rgb(0, 214, 206);
  cursor: pointer;
}
</style>
